<template>
	<up-sticky :zIndex="4">
		<view class=" white-bg up-p-40" style="padding-bottom: 4px !important;">
			<up-search focus shape="square" borderColor="#165DFF" bgColor="#fff" height="44px" :searchIconSize="26"
				:showAction="false" placeholder="搜索题库、章节等" @change="search" v-model="keyword"></up-search>
			<view class="up-m-b-12">
				<u-tabs :list="tabList" :current="current" lineColor="#165DFF" @click="tabClick" :scrollable="false"
					:activeStyle="{
					    color: '#165DFF',
					    fontWeight: 'bold',
					    transform: 'scale(1.05)'
					}"></u-tabs>
			</view>
		</view>
	</up-sticky>

	<block v-if="current === 0 ">
		<u-empty v-if="data.subjectList.length === 0" marginTop="80px" mode="data"
			icon="https://byjh.oss-cn-hangzhou.aliyuncs.com/de41ecc795cf45b7865a4b542615c881.jpg">
		</u-empty>
		<block v-for="info in data.subjectList" :key="info.id">
			<subject-item :info="info" />
		</block>
	</block>

	<block v-if="current === 1 ">
		<u-empty v-if="data.questionList.length === 0" marginTop="80px" mode="data"
			icon="https://byjh.oss-cn-hangzhou.aliyuncs.com/de41ecc795cf45b7865a4b542615c881.jpg">
		</u-empty>
		<block v-for="info in data.questionList" :key="info.id">
			<question-item :info="info" />
		</block>
	</block>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import IndexApi from '@/api/index.js';
	import SubjectItem from '@/components/SubjectItem.vue';
	import QuestionItem from '@/components/QuestionItem.vue';

	const keyword = ref('');
	const current = ref(0);
	const data = ref({
		subjectList: [],
		questionList: []
	});

	const search = () => {
		if(!keyword.value){
			data.value.subjectList = []
			data.value.questionList = []
			return
		}
		IndexApi.Search(keyword.value).then(resp => {
			data.value.subjectList = resp.data.subjectList || [];
			data.value.questionList = resp.data.questionList || [];
		})
	}

	const tabList = [{
		name: '科目'
	}, {
		name: '题库'
	}]
	const tabClick = ({index}) => {
		current.value = index;
	}
</script>

<style lang="scss">
	page{
		padding-bottom: 50px !important;
	}

</style>